<template>
  <div>
    <van-nav-bar
    class="app-nav-bar"
      title="登录"
      left-arrow
      @click-left="$router.back()"
    />

    <van-form
    ref="login-form"
    @submit="onlogin"
    :show-error="false"
    :show-error-message="false"
    :validate-first="true"
    @failed="onFailed"
    >
    <van-field
      v-model="user.mobile"
      left-icon="phone-o"
      placeholder="请输入手机号"
      :rules="formRules.mobile"
      name="mobile"
    />
    <van-field
      v-model="user.code"
      clearable
      left-icon="more-o"
      placeholder="请输入验证码"
      :rules="formRules.code"
      name="code"
    >
    <template #button>
    <van-button class="send-btn" size="small" v-if="ifcountdown" @click.prevent="onsendsms" :loading="ifloading" round>发送验证码</van-button>
    <van-count-down v-else :time="time" format=" ss s"  @finish='countover' />
  </template>
    </van-field>
    <div class="login-btn-wrap">
    <van-button  class="login-btn" type="info" block>登录</van-button>
  </div>
  </van-form>

  </div>
</template>

<script>
import { login, sendSms } from '@/api/user'
import { Toast } from 'vant'
export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        mobile: '',
        code: ''
      },
      formRules: {
        mobile: [{ required: true, message: '请输入手机号' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式错误' }
        ],
        code: [{ required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }
        ]
      },
      ifcountdown: true,
      time: 10 * 1000,
      ifloading: false
    }
  },
  methods: {
    onlogin () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      login(this.user).then(res => {
        console.log(res.data)
        Toast.success('登录成功')
        this.$store.commit('setuser', res.data)
        this.$router.back()
      }).catch(err => {
        console.log(err)
        Toast.fail('登录失败，手机号或验证码错误')
      })
    },
    onFailed (error) {
      console.log('验证失败', error)
      if (error.errors[0]) {
        Toast({
          message: error.errors[0].message,
          position: 'top'
        })
        // this.$toast(error.errors[0].message)
      }
    },
    async onsendsms () {
      try {
        await this.$refs['login-form'].validate('mobile')
        this.ifloading = true
        sendSms(this.user.mobile).then(res => {
          console.log(res)
        })
        this.ifcountdown = false
      } catch (err) {
        Toast({
          message: err.message,
          position: 'top'
        })
      }
      this.ifloading = false

      // this.$refs['login-form'].validate('mobile').then(data => {
      //   console.log(data)
      // })
    },
    countover () {
      this.ifcountdown = true
    }
  }
}
</script>

<style lang="less" scoped>
.login-btn-wrap{
  padding: 26px 16px;
  .login-btn{
    background-color: #6db4fb;
    border: none;
    font-size: 15px;
  }
}
.send-btn{
  width: 86px;
  height: 23px;
  background-color: #ededed;
}
</style>
